<template>
  <div class="index-wrap">
    <div class="footer-box">
      <div class="content-box" v-for="(item,index)  in itemList" :key="index" @click="toPage(item.push,item.name)">
        <img :src="isSelect===item.name?item.iconSelect:item.icon" class="back" :class="item.cls"
             onclick="return false"/>
        <div class="title" :class="{'active':isSelect === item.name}">{{item.name}}</div>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isSelect: "",
        itemList: [
          {
            cls: "memo",
            name: "报名记录",
            push: "/applymemo",
            icon: require('./record_nor.png'),
            iconSelect: require('./record_sel.png')
          },
          {
            cls: "issue",
            name: "发布招聘",
            push: "/issuework",
            icon: require('./job_nor.png'),
            iconSelect: require('./job_sel.png')
          },
        ]
      }
    },
    mounted() {
      this.isSelect = this.$route.name;
      window.addEventListener('popstate', (event) => {//监听微信浏览器
        let hash = event.currentTarget.location.hash;
        if (hash === "/memo") {
          this.isSelect = "报名记录";
        } else {
          this.isSelect = "发布招聘";
        }
      });
    },
    methods: {
      toPage(page, name) {//跳转页面
        this.isSelect = name;
        this.$router.push({path: page});
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../../assest/mixin";

  .index-wrap {
    .wh(100%, 100%);
    overflow: hidden;
    .footer-box {
      position: fixed;
      bottom: 0;
      display: flex;
      .wh(100%, 1.307rem);
      background: @talent-bg-color;
      box-shadow: 0rem 0rem 0.533rem 0rem rgba(144, 144, 144, 0.15);
      z-index: 100;
      .content-box {
        flex: 1;
        .fj(center, center);
        flex-direction: column;
        .title {
          padding-top: 0.093rem;
          .size-color(0.293rem, rgba(153, 153, 153, 1));
        }
        .memo {
          .wh(0.64rem, 0.64rem);
        }
        .issue {
          .wh(0.64rem, 0.64rem);
        }
        .active {
          color: rgba(255, 143, 51, 1);
        }
        .back {
          padding-top: 0.093rem;
        }
      }
    }
  }
</style>
